<!DOCTYPE html>
<html>
<head>
<title>源辰-后台商品添加</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="shortcut icon" href="../../images/yc.png" type="image/x-icon" />

</head>
<body>
	<div id="forms" class="mt10">
		<div id="app">
			<div class="box">
				<div class="box_border">
					<div class="box_top">
						<b class="pl15">添加商品信息</b>
					</div>
					<div class="box_center">
						<form action="#" class="jqtransform" id="addGoodsForm"
							@submit.prevent="addGoodsInfo">
							<table class="form_table pt15 pb15" width="100%" border="0"
								cellpadding="0" cellspacing="0">
								<tr>
									<td class="td_right">商品类型：</td>
									<td><select id="goodstype" v-model="formData.goodstype"
										class="input-text lh30">
											<option value="">请选择商品类型</option>
											<option v-for="type in goodsType" :value="type.tid">
												{{ type.tname }}</option>
									</select></td>
									<td class="td_right">商品名称：</td>
									<td><input type="text" id="gname" v-model="formData.gname"
										class="input-text lh30" size="40" placeholder="商品名称" /></td>
									<td class="td_right">商品价格：</td>
									<td><input type="text" id="gprice"
										v-model="formData.gprice" class="input-text lh30" size="40"
										placeholder="商品价格"></td>
								</tr>
								<tr>
									<td class="td_right">商品描述：</td>
									<td><input type="text" id="ginfo" v-model="formData.ginfo"
										class="input-text lh30" size="40" placeholder="商品描述" /></td>
									<td class="td_right">商品重量：</td>
									<td><input type="text" id="gweight"
										v-model="formData.gweight" class="input-text lh30" size="40"
										placeholder="商品重量" /></td>

									<td class="td_right">库存：</td>
									<td><input type="text" id="gblance"
										v-model="formData.gblance" class="input-text lh30" size="40"
										placeholder="库存" /></td>
								</tr>
								<tr>
									<td class="td_right">商品图片：</td>
									<td><input type="file" id="gpic" name="gpic" ref="gpic"
										class="input-text lh30" size="40" multiple="multiple"
										@change="setImagePreviews($event, 'showPics')"></td>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td>&nbsp;</td>
									<td colspan="5" align="center">
										<div id="showPics">
											<img v-for="(preview, index) in imagePreviews" :key="index"
												:src="preview"
												style="width: 100px; height: auto; margin-right: 10px;">
										</div>
									</td>
								</tr>


								<tr>
									<td colspan="4" align="center"><input type="button"
										name="button" class="btn btn82 btn_save2"
										@click="addGoodsInfo" value="添加"> <input type="reset"
										name="button" class="btn btn82 btn_res" value="重置"></td>
								</tr>
							</table>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/showpic.js"></script>
	<script type="text/javascript" src="../js/ajaxfileupload.js"></script>
	<script type="text/javascript" src="../js/axios.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/qs.js"></script>
	<script type="text/javascript">
let app = new Vue({
	el: '#app',
	data: {
		goodsType:[],
		formData: {  
	        goodstype: '',  
	        gname: '',  
	        gprice: '',  
	        ginfo: '',  
	        gweight: '', 
	        gblance: '',
	      },
	      imagePreviews: []  // 用于存储图片预览的 URL  
	},
	methods: {  
        // 加载商品类型  
        selectGoodsType() {  
            axios.get("../../type/list").then(resp => {  
                if (resp.code == 500) return alert("失败");  
                this.goodsType = resp.data.data;  
            });  
        },  
  
      	<!--// 图片预览  
		setImagePreviews(event) {  
    		const files = event.target.files;  
    		if (!files) {  
        		console.error('No files were found.');  
        	return;  
   	 		}  
    			this.imagePreviews = []; // 清空之前的预览  
  
    		for (let i = 0; i < files.length; i++) {  
        		const reader = new FileReader();  
        		reader.onload = (e) => {  
            	this.imagePreviews.push(e.target.result); // 存储图片的预览 URL  
        		};  
        		reader.readAsDataURL(files[i]);  
   			}  
		},   
  -->
        // 添加商品  
         addGoodsInfo() {  
            if (!this.validateForm()) {  
                return;  
            } 
			
            const formData = new FormData();  
            formData.append('tid', this.formData.goodstype);  
            formData.append('gname', this.formData.gname);  
            formData.append('gprice', this.formData.gprice);  
            formData.append('ginfo', this.formData.ginfo);  
            formData.append('gweight', this.formData.gweight);  
            formData.append('gblance', this.formData.gblance);  
  
         	// 添加图片文件  
            for (let i = 0; i < this.$refs.gpic.files.length; i++) {  
                formData.append('files[]', this.$refs.gpic.files[i]);  
            }
         	
            axios.post("../../goods/add", formData, {  
            }).then(response => {  
                console.log('商品信息和图片添加成功', response);
                
                this.formData = {    
                    goodstype: '',    
                    gname: '',    
                    gprice: '',    
                    ginfo: '',    
                    gweight: '',   
                    gblance: '',  
                };  
                this.imagePreviews = [];
           
                alert('商品添加成功！');  
            }).catch(error => {  
                console.error('商品信息和图片添加失败', error);  
            });  
        },
        
        validateForm() {  
            // 这里添加表单验证逻辑  
            if (!this.formData.goodstype || !this.formData.gname || !this.formData.gprice || !this.formData.gweight || !this.formData.gblance) {  
                alert('请填写所有必填项！');  
                return false;  
            }  
            // 可以添加更多验证  
            return true;  
         
    	},
    },
    
    mounted() {  
        this.selectGoodsType();  
    }  
	
}) 
</script>
</body>
</html>